<template>
  <div>
    <div style="background-color: #fff; height: 150px">
      <el-form :model="form" style="max-width: 500px">
        <div style="display: flex">
          <el-form-item label="昵称">
            <el-input
              v-model="form.name"
              placeholder="请输入内容"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input
              v-model="form.name"
              placeholder="请输入内容"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="form.name"
              placeholder="请输入内容"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input
              v-model="form.name"
              placeholder="请输入内容"
              style="width: 300px"
            />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="性别">
            <el-select
              v-model="form.region"
              placeholder="请选择内容"
              style="width: 300px"
            >
              <el-option label="全部" value="all" />
              <el-option label="男" value="nan" />
              <el-option label="女" value="nv" />
            </el-select>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-col :span="11">
              <el-date-picker
                v-model="form.date1"
                type="date"
                placeholder="请选择开始时间"
                style="width: 300px"
              />
            </el-col>
            <el-col :span="54" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-date-picker
                v-model="form.date2"
                placeholder="请选择结束时间"
                style="width: 300px; margin-left: 130px"
              />
            </el-col>
          </el-form-item>
        </div>
        <el-button type="primary">检索</el-button>
        <el-button type="primary">重置</el-button>
        <el-button>添加标签</el-button>
        <el-button>有效</el-button>
        <el-button>无效</el-button>
      </el-form>
    </div>
    <div style="background-color: #fff; height: 400px; margin-top: 20px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column prop="_id" label="用户ID" width="220" />
        <el-table-column
          prop="ztime"
          label="注册时间"
          :formatter="dateFormat"
          width="180"
        />
        <el-table-column prop="name" label="昵称" />
        <el-table-column prop="tel" label="手机号" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="address" label="地区" />
        <el-table-column prop="jine" label="消费金额" />
        <el-table-column prop="flag" label="状态" />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="router.push(`/index/look?_id=${scope.row._id}`)">
              查看
            </el-button>
            <el-button link type="primary" @click="change"> 
              状态
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
const router = useRouter();
// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const tableData = ref([]);
const selectable = (row: any) => ![1, 2].includes(row.id);
const getlist = async () => {
  const res = await axios.get("http://localhost:3000/zjm/list");
  console.log(res.data);
  tableData.value = res.data.list;
  tableData.value.forEach((item: any) => {
    if (item.flag) {
      item.flag = "有效";
    } else {
      item.flag = "无效";
    }
  });
};
const dateFormat = (row, column, cellValue, index) => {
  const daterc = row[column.property];
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    /* 在日期格式中，月份是从0开始，11结束，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
    var month =
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes =
      date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds =
      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return (
      year +
      "-" +
      month +
      "-" +
      day +
      " " +
      hours +
      ":" +
      minutes +
      ":" +
      seconds
    );
  }
};
const change = () => {
  tableData.value.forEach((item: any) => {
    if (item.flag == '有效') {
      item.flag = "无效";
    } else {
      item.flag = "有效";
    }
  });
};
onMounted(() => {
  getlist();
});
</script>

<style scoped>
</style>